<template>
  <div>
    <el-card>
      <el-row :gutter="10">
        <!--用户搜索-->
        <el-col :span="5">
          <el-input placeholder="请输入关键词" :model="productListForm" v-model="productListForm.productName">
            <el-button slot="append" icon="el-icon-search" @click="productConditionClick(productListForm.productName)"></el-button>
          </el-input>
        </el-col>
        <el-col :span="11" style="text-align: right;">
        </el-col>
      </el-row>
      <el-table :data="productList" border>
        <el-table-column label="No" type="index"></el-table-column>
        <el-table-column label="物料名称" prop="productName" min-width="200"></el-table-column>
        <el-table-column label="上限" prop="upperLimit" min-width="200"></el-table-column>
        <el-table-column label="下限" prop="lowerLimit" min-width="200"></el-table-column>
        <el-table-column label="库龄" prop="storageAge" min-width="200"></el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="productEditBtnClick(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="productListForm.pageNum"
        :page-sizes="[10, 20, 30, 40]" :page-size="productListForm.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
      <el-dialog v-dialogDrag title="编辑物品" :visible.sync="editProductDialog" width="40%" center @closed="editProductDialogClosed"
        :close-on-click-modal="false">
        <span style="text-align: center">
          <el-form ref="editProductFormRef" :model="editProductForm" :rules="editProductFormRules" label-position="right"
            label-width="80px">
            <!--权限名称-->
            <el-form-item label="物料名称" prop="productName" v-on:keyup.enter.native="editProduct">
              <el-input v-model="editProductForm.productName" v-bind:disabled="true"></el-input>
            </el-form-item>
            <!--权限路径-->
            <el-form-item label="上限" prop="upperLimit" v-on:keyup.enter.native="editProduct">
              <el-input v-model="editProductForm.upperLimit" oninput="value=value.replace(/^\.+|[^\d.]/g,'')"></el-input>
            </el-form-item>
            <el-form-item label="下限" prop="lowerLimit" v-on:keyup.enter.native="editProduct">
              <el-input v-model="editProductForm.lowerLimit" oninput="value=value.replace(/^\.+|[^\d.]/g,'')"></el-input>
            </el-form-item>
            <el-form-item label="库龄" prop="storageAge" v-on:keyup.enter.native="editProduct">
              <el-input v-model="editProductForm.storageAge" oninput="value=value.replace(/^\.+|[^\d.]/g,'')"></el-input>
            </el-form-item>
          </el-form>
          <div>
            <el-button type="primary" @click="editProduct">提交</el-button>
          </div>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'AlarmManage',
  data () {
    return {
      value: '',
      editProductDialog: false,
      total: 0,
      productList: [],
      productListForm: {
        productName: '',
        pageNum: 1,
        pageSize: 10
      },
      editProductForm: {
        productId: '',
        productName: '',
        upperLimit: '',
        lowerLimit: '',
        storageAge: 0
      },
      editProductFormRules: {
        upperLimit: [{
          required: true,
          message: '请输入正确数值',
          trigger: 'blur'
        }],
        lowerLimit: [{
          required: true,
          message: '请输入正确数值',
          trigger: 'blur'
        }],
        storageAge: [{
          required: true,
          message: '请输入正确数值',
          trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    async getProductList () {
      const res = await this.$apiUtil.postByJson('product/getProductListCondition', this.productListForm)
      console.log(res)
      if (res.code !== '200') {
        return this.$message.error(res.msg)
      }
      this.productList = res.data.productVOS
      this.total = res.data.totalSize
      console.log(this.productList)
    },
    handleSizeChange (newSize) {
      this.productListForm.pageSize = newSize
      this.getProductList()
    },
    handleCurrentChange (newPage) {
      this.productListForm.pageNum = newPage
      this.getProductList()
    },
    editProductDialogClosed () {
      this.$refs.editProductFormRef.resetFields()
    },
    productConditionClick (row) {
      console.log(row)
      this.productListForm.productName = row
      this.getProductList()
    },
    productEditBtnClick (row) {
      this.editProductDialog = true
      this.editProductForm.productId = row.productId
      this.editProductForm.productName = row.productName
      this.editProductForm.upperLimit = row.upperLimit
      this.editProductForm.lowerLimit = row.lowerLimit
      this.editProductForm.storageAge = row.storageAge
    },
    async editProduct () {
      const res = await this.$apiUtil.postByJson('product/editProductCondition', this.editProductForm)
      console.log(res)
      if (res.code !== '200') {
        return this.$message.error(res.msg)
      }
      this.$message.success('编辑预警配置成功！')
      this.editProductDialog = false
      this.getProductList()
    }
  },
  created () {
    this.getProductList()
  }
}
</script>

<style lang="less" scoped>
</style>
